Vue.component('m_header', {
	props: ['p_type',"user_info"],
	// 选项
	template: '<div><header class="my_header">\
			<div class="my_container">\
			<div class="logo my_flex my_flex_center">\
			<img src="imgs/index/logo.png" class="cursor" onclick="location.href=\'index.html\'" alt="" />\
			</div>\
			<div class="item my_flex">\
			<li v-bind:class="[{active:p_type==0}]" onclick="location.href=\'index.html\'">首页</li><li v-bind:class="[{active:p_type==1}]" onclick="location.href=\'news.html\'">新闻资讯</li><li v-bind:class="[{active:p_type==2}]" onclick="location.href=\'community.html\'">论坛中心</li><li v-bind:class="[{active:p_type==3}]" onclick="location.href=\'contact.html\'">联系我们</li>\
			</div>\
			<div v-if="!user_info.user.isLogin" class="login register my_flex my_flex_between">\
				<button class="btn btn_login " type="button" @click="register">注册 </button>\
				<button class="btn" type="button" data-toggle="modal" data-target="#login">登录 </button>\
			</div>\
			<div v-if="user_info.user.isLogin" class="login my_flex my_flex_center">\
			<div class="">\
			<button class="btn btn_login dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
			{{user_info.user.UserName}} <span class="caret"></span>\
			</button>\
			<ul class="dropdown-menu my_menu" aria-labelledby="dropdownMenu2">\
				<li><a href="my_center.html">我的账户</a></li>\
				<li><a href="#" @click="esc">注销</a></li>\
				</ul>\
			</div>\
			</div>\
			</div>\
		</header>\
		<div class="modal my_modal fade" id="login" tabindex="-1" role="dialog">\
				<div class="modal-dialog" role="document">\
				    <div class="modal-content">\
				      <div class="modal-header">\
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
				        <h4 class="modal-title">登录</h4>\
				      </div>\
				      <div class="modal-body">\
						<form id="editPwd" class="form-horizontal">\
						  <div class="form-group">\
						    <label for="inputPassword3" class="col-sm-3 control-label">用户名</label>\
						    <div class="col-sm-6">\
						      <input name="newPwd" type="text" v-on:input="err=false" v-on:focus="err=false" class="form-control" v-model="uName" id="inputPassword3" placeholder="请输入用户名">\
						    </div>\
						  </div>\
						  <div class="form-group">\
						    <label for="inputPassword3" class="col-sm-3 control-label">密码</label>\
						    <div class="col-sm-6">\
						      <input name="confirmPwd" v-on:input="err=false" v-on:focus="err=false" type="password" v-model="pwd"  class="form-control" id="inputPassword3" placeholder="密码">\
						    </div>\
						  </div>\
						  <div class="form-group" style="position:relative;">\
						  		<span class="cursor" style="position:absolute;right: 15px;top: 0px;" @click="forget_show">忘记密码?</span>\
							  	<div class="col-sm-8 col-sm-offset-3" style="height: 20px;color: red;" v-show="err">\
									{{tips}}\
								</div>\
							</div>\
						</form>\
				      </div>\
				      <div class="modal-footer">\
				        <button type="button" class="btn cancel" data-dismiss="modal">取 消</button>\
				        <button type="button" class="btn btn-base confirm" @click="login1">确 定</button>\
				      </div>\
				    </div>\
			  	</div>\
			</div>\
			<!--找回密码-->\
			<div class="modal my_modal fade" id="forget_password" tabindex="-1" role="dialog">\
				<div class="modal-dialog" role="document">\
				    <div class="modal-content">\
				      <div class="modal-header">\
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
				        <h4 class="modal-title">找回密码</h4>\
				      </div>\
				      <div class="modal-body">\
							<form class="form-horizontal form" id="form_forget" role="form">\
						<div class="form-group">\
							<label for="inputEmail1" class="col-sm-2 control-label">手机号:</label>\
							<div class="col-sm-9">\
								<input type="number" v-model="forget_phone" v-on:input="isPhoneE=true" name="Mobile" class="form-control" placeholder="Cell-phone number">\
								<p class="help-block danger" style="margin-bottom: 0;" v-show="!isPhoneE">手机号未注册！</p>\
							</div>\
						</div>\
						<div class="form-group">\
							<div class="col-sm-offset-2 col-sm-9">\
								<div class="col-sm-6" style="padding-left: 0;padding-right: 0;">\
									<input type="text" name="ValidateCode"   onkeyup="this.value=this.value.replace(/\D/g,\'\')" onafterpaste="this.value=this.value.replace(/\D/g,\'\')" maxlength="4" required="required" v-on:input="err=false" v-on:focus="err=false" class="no_padding form-control" placeholder="请输入验证码" v-model="forget_code">\
								</div>\
								<div class="col-sm-6" style="padding-left: 0;padding-right: 0;padding-right: 0;">\
									<button @click.prevent="getCode" :class=\'[{"btn-base":isCode}]\' class="btn no_padding btn-block" style="font-size: 10px;height:34px;">\
										{{code_info.time}}{{code_info.code_tips}}\
									</button>\
								</div>\
							</div>\
						</div>\
						<div class="form-group">\
							<label for="inputPassword1" class=" col-sm-2 control-label">登陆密码</label>\
							<div class="col-sm-9">\
								<input type="password" class="form-control" name="Password"  name="Password" v-model="forget_password" placeholder="登陆密码">\
							</div>\
						</div>\
						<div class="form-group">\
							<label for="inputPassword1" class="col-sm-2 control-label">确认密码</label>\
							<div class="col-sm-9">\
								<input type="password" class="form-control" name="Password_2" v-model="forget_password2" placeholder="确认密码">\
							</div>\
						</div>\
					</form>\
				      </div>\
				      <div class="modal-footer">\
				        <button type="button" class="btn cancel" data-dismiss="modal">取 消</button>\
				        <button type="button" class="btn btn-base confirm" @click="findPwd">确 定</button>\
				      </div>\
				    </div>\
			  	</div>\
			</div>\
		</div>',
	data: function() {
		return {
			type: 0,
			uName: "",
			pwd: "",
			err: false,
			tips: "用户名或密码错误,请重试",
			forget_phone:"",
			forget_password:"",
			forget_password2:"",
			forget_code:"",
			isPhoneE:true,
			code_info:{
				time: '',
				code_tips: '获取验证码',
				intervals:60,
				get_code:'获取验证码',
				wait_code:'秒后获取',
				server_code:"",//服务器返回的验证码
			},
			url:{
				checkMobileMsgCodeForUserID:'/api/Home/CheckMobileMsgCodeForUserID', //检测用户是否存在
				findPwd:'/api/UserInfo/FindPwd2', //找回密码
			}
		}
	},
	mounted: function() {
		var that = this;
		console.log(this.user_info)
		setTimeout(function(){
			$('#forget_password').bootstrapValidator(valid_json);
		},100)
		window.addEventListener('keyup',function(ev){
			console.log(globalData.userInfo.isLogin)
			if(ev.keyCode == "13" && !globalData.userInfo.isLogin){
				that.login1()
			}			
		})
	},
	computed:{
		isCode: function() {
			var tel = /^1\d{10}$/
			return(tel.test(this.forget_phone) && this.code_info.time == '')
		},
	},
	methods: {
		login1: function() {
			var pwd = this.pwd;
			var that = this
			//pwd = hex_md5(pwd).toUpperCase();
			console.log(pwd);
			var data = {
				'Mobile': this.uName,
				'Email': '',
				'Password': pwd,
				'url': globalData.constParam.url.baseUrl,
				'ClientId': '62ccad6d-9611-41c5-96f6-08ec0ada0f68',
				'ClientSecret': '5678'
			};
			url = "/api/home/LoginByWhitePwd";
			globalData.ajaxPost(url, data, function(res) {
				if(res.suc) {
					globalData.setStorage(globalData.constParam.param.UTOKEN, res.data);
					globalData.userInfo = res.data
					globalData.userInfo.isLogin = 1
					that.user_info.user = globalData.userInfo
					$("#login").modal("hide")
				} else
					that.err = true;
			});
		},
		esc: function() {
			globalData.removeStorage(globalData.constParam.param.UTOKEN);
			window.location.href = "index.html";
		},
		register: function() {
			globalData.utils.setUrl("register.html");
		},
		forget_show:function(){
			var that = this;
			$("#login").modal("hide")
			that.forget_phone = ""
			that.forget_phone=""
			that.forget_password=""
			that.forget_password2=""
			that.forget_code=""			
			$("#forget_password").modal()
		},
		getCode: function() {
			var that = this;
			if(!that.isCode)
				return;
			//开始倒计时
			that.code_info.time = this.code_info.intervals
			that.isCode = false
			that.code_info.code_tips = that.code_info.wait_code			
			var timer = setInterval(function() {
				that.code_info.time--
					if(that.code_info.time < 1) {
						clearInterval(timer);
						that.code_info.time = ''
						that.isCode = true
						that.code_info.code_tips = that.code_info.get_code
					}
			}, 1000)
			//判断用户是否存在,不存在会返回验证码
			globalData.ajaxPost(that.url.checkMobileMsgCodeForUserID, {
				"Mobile": that.forget_phone,
				"MsgType": 1
			}, function(res) {
				console.log(res)
				if(!res.suc){
					that.isPhoneE = false;
					return;
				}else{
					//获取返回的验证码
					that.code_info.server_code = res.data
				}
				
			})
		},
		findPwd:function(){
			var that = this;
			$('#forget_password').bootstrapValidator('validate');
			var b = $('#forget_password').data("bootstrapValidator").isValid();
			if(!b)
				return;
			if(that.forget_code!=that.code_info.server_code){
				$("#alert").modal()
				$("#alert p").text("验证码不正确")
				return;
			}
			var data = {
				Mobile:that.forget_phone,
				Password:that.forget_password,
				ValidateCode:that.forget_code,
			}
			console.log(data)
//			RequestParas={'Mobile':'15207124170','Email':'','Password':'ZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2U=','ValidateCode':'6327','NickName':'哈哈哈'}
			globalData.ajaxPost(that.url.findPwd, data, function(res) {
				console.log(res)
				if(res.suc){					
					$("#forget_password").modal("hide")
					globalData.utils.alert("重置密码成功",function(){
						$("#login").modal()
					})
				}else{
					$("#alert").modal()
					$("#alert p").text(res.msg)
				}
				
			})
		}
	}
});

Vue.component('m_bottom', {
	props: ["user_info"],
	// 选项
	template: '<footer id="footer">\
				<!--合作商-->\
				<!--版权-->\
				<div class="copy">\
					<div class="col-sm-6 text-right" style="border-right: 1px solid #626262;">@WOW E总管</div>\
					<div class="col-sm-6 text-left">深圳网安备  3309878986578966号</div>\
				</div>\
				<!--提示框-->\
				<div class="modal my_modal fade" id="alert" tabindex="-1" role="dialog">\
					<div class="modal-dialog" role="document">\
					    <div class="modal-content">\
					      <div class="modal-body">\
							<p></p>\
					      </div>\
					      <div class="modal-footer">\
					        <button type="button" class="btn btn-base confirm" data-dismiss="modal">确 定</button>\
					      </div>\
					    </div>\
				  	</div>\
				</div>\
				<!--确认框-->\
				<div class="modal my_modal fade" id="confirm" tabindex="-1" role="dialog">\
					<div class="modal-dialog" role="document">\
					    <div class="modal-content">\
					      <div class="modal-body">\
							<p></p>\
					      </div>\
					      <div class="modal-footer">\
					      <button type="button" class="btn cancel" data-dismiss="modal">取 消</button>\
					        <button type="button" class="btn btn-base confirm" data-dismiss="modal">确 定</button>\
					      </div>\
					    </div>\
				  	</div>\
				</div>\
			</footer>',
	data: function() {
		return {
			type: 0,
			isLogin: globalData.getUserInfo().isLogin,
			uName: "13798513961",	//无级野风
			//uName: "13809255975",	//万忠
			pwd: "1234567",
			err: false,
			tips: "用户名或密码错误,请重试"
		}
	},
	mounted: function() {
	},
	methods: {
	}
});


Vue.component("loading",{
	template:'<div class="loading">\
			<div class="spinner">\
				<div class="spinner-container container1">\
					<div class="circle1"></div>\
					<div class="circle2"></div>\
					<div class="circle3"></div>\
					<div class="circle4"></div>\
				</div>\
				<div class="spinner-container container2">\
					<div class="circle1"></div>\
					<div class="circle2"></div>\
					<div class="circle3"></div>\
					<div class="circle4"></div>\
				</div>\
				<div class="spinner-container container3">\
					<div class="circle1"></div>\
					<div class="circle2"></div>\
					<div class="circle3"></div>\
					<div class="circle4"></div>\
				</div>\
				<li class="load_tip">loading...</li>\
			</div>\
		</div>',	
})


var valid_json = {
	feedbackIcons: {
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	},
	fields: {
		ValidateCode: {
			validators: {
				notEmpty: {
					message: '验证码不能为空'
				}
			},
		},
		Mobile: {
			validators: {
				notEmpty: {
					message: '手机号不能为空'
				},
				stringLength: {
					min: 11,
					max: 11,
					message: '请输入11位手机号'
				},
			}
		},
		UserName: {
			validators: {
				notEmpty: {
					message: '用户名不能为空'
				},
			}
		},
		Password: {
			validators: {
				notEmpty: {
					message: '密码不能为空'
				},
				stringLength: {
                    min: 6,
                    message: '密码长度不少于6'
                }
			}
		},
		Password_2: {
			validators: {
				notEmpty: {
					message: '确认密码不能为空'
				},
				stringLength: {
                    min: 6,
                    message: '密码长度不少于6'
                },
				identical: {
					field: 'Password',
					message: "两次输入的密码不一致"
				}
			}
		}
	}
}